<template>
  <div>
    <el-table
    :data="tableConfig.tableData"
    style="width: 100%"
    border
    @selection-change="selectChange"
    :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <!-- 是否有前面的多选效果 -->
      <el-table-column
      type="selection"
      width="55"
      align="center"
      v-if="tableConfig.style.selection"
    >
      </el-table-column>
      <!-- 是否显示前面的序号 -->
      <el-table-column v-if="isIndex" type="index" :label="indexLabel" align="center" width="50"></el-table-column>
      <!-- 表格的每一项 -->
      <template v-for="item in propList">
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        :key="item.prop"
        v-if="!item.hidden"
        align="center"
      >
        <template #default="scope">
          <slot :name="item.slotname" :row="scope.row">
            {{ scope.row[item.prop] }}
          </slot>
        </template>
      </el-table-column>
      </template>
    </el-table>
  </div>

</template>

<script>
export default {
  name: "TableCpn",
  props: {
    tableConfig: {
      type: Object,
      default: () => {},
    },
    propList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    selectChange(e) {
      console.log(e)
    },
  },
};
</script>